import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Toast, NavBar, Button } from 'react-vant';
import '../../scss/lwl/every.css'
import { Popup, Cell } from 'react-vant'
import { useSearchParams } from 'react-router-dom';
import axios from 'axios';
import { replace, filtion } from "verification-sensitive";
export default function EveryAns() {
  const jump = useNavigate()
  const [params] = useSearchParams()
  const [answer, setAns] = useState([])
  const getAnswer = async () => {
    let { data: { answer } } = await axios.get('http://localhost:3000/answer')
    setAns(answer)
  }
  const [question, setQuestion] = useState([])
  const getQuestion = async () => {
    let { data: { question } } = await axios.get('http://localhost:3000/question')
    setQuestion(question)
  }
  useEffect(() => {
    getAnswer()
    getQuestion()
  }, [])
  const [visible, setVisible] = useState(false)
  const [say, setSay] = useState('')
  const common = async (qid) => {
    if (say == '') {
      Toast.fail('请输入内容')
    } else {
      let flag = filtion(say)
      if (flag == true) {
        await axios.post('http://localhost:3000/answerAdd', { qid: qid, answer: replace(say, '*') })
        Toast.success('回复成功')
        setVisible(false)
        getAnswer()
        getQuestion()
      }else{
        await axios.post('http://localhost:3000/answerAdd', { qid: qid, answer: say })
        Toast.success('回复成功')
        setVisible(false)
        getAnswer()
        getQuestion()
      }
    }
  }
  return (
    <div id='everylist'>
      <NavBar
        title="所有回复"
        onClickLeft={() => { jump(-1) }}
      />
      {question.filter(e => e._id === params.get('id')).map(item => (
        <>
          <div id='everyAnsList' key={item._id}>
            <div className="reSay">
              <div className="qphoto">
                <img src="./aaa1.jpg" alt="" />
                <span className='quetip'>问</span>
              </div>
              <div className="ques">{item.question}</div>
            </div>
            {answer.filter(element => element.qid === item._id).map(ele => (
              <>
                <div key={ele._id} className='anslist'>
                  <div className="qphoto1">
                    <img src="./aaa5.png" alt="" />
                    <span className='anstip'>答</span>
                  </div>
                  <div className="ques">{ele.answer}</div>
                </div>
              </>
            ))}
          </div>
          <Button type='primary' style={{ width: '100%', marginTop: '50px' }} onClick={() => setVisible(true)}>我也要评论</Button>
          <Popup visible={visible} onClose={() => setVisible(false)}>
            <div style={{ padding: '50px 120px' }}>
              {<div className='popup'>
                <input type="text" placeholder='来说点什么吧...' value={say} onChange={(e) => { setSay(e.target.value) }} />
                <Button type='primary' onClick={() => { common(item._id) }}>回复</Button>
              </div>}
            </div>
          </Popup>
        </>
      ))}
    </div>
  )
}
